<template>
  <div class="container">
    <a-card class="resume-card">
      <template #title>个人信息</template>
      <template #extra>
        <a-button type="primary" @click="handleAddCvInfo()">补全个人信息</a-button>
      </template>
      <div>
        <a-form
          :model="form"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          layout="inline"
          class="grid-form"
        >
          <a-form-item label="用户名">
            <a-input v-model:value="form.userName" disabled />
          </a-form-item>
          <a-form-item label="邮箱">
            <a-input style="width: 200px" v-model:value="form.email" disabled />
          </a-form-item>
          <a-form-item label="手机号码" style="margin-left: 20px">
            <a-input v-model:value="form.telNum" disabled />
          </a-form-item>
          <a-form-item label="性别">
            <!-- <a-input v-model:value="form.sex" disabled /> -->
            <span style="padding-left: 11px" v-if="form.sex === 0">男</span>
            <span style="padding-left: 11px" v-if="form.sex === 1">女</span>
          </a-form-item>
          <!-- 毕业院校 -->
          <a-form-item label="年龄">
            <a-input v-model:value="form.age" disabled />
          </a-form-item>
          <a-form-item label="毕业院校">
            <a-input v-model:value="form.bg" disabled />
          </a-form-item>
          <!-- 专业 -->
          <a-form-item label="专业">
            <a-input v-model:value="form.major" disabled />
          </a-form-item>
          <a-form-item label="身份">
            <a-input v-model:value="form.gen" disabled />
          </a-form-item>
          <a-form-item label="绩点">
            <a-input v-model:value="form.gpa" disabled />
          </a-form-item>
          <a-form-item label="个人链接">
            <a-input v-model:value="form.link" disabled />
          </a-form-item>
          <a-form-item label="当前所在地">
            <a-input v-model:value="form.location" disabled />
          </a-form-item>
          <a-form-item label="描述">
            <a-input v-model:value="form.description" disabled />
          </a-form-item>
          <a-form-item label="期望岗位">
            <a-input v-model:value="form.jobIntention" disabled />
          </a-form-item>
          <a-form-item label="工作地">
            <a-input v-model:value="form.workLocation" disabled />
          </a-form-item>
          <a-form-item label="其他">
            <a-input v-model:value="form.others" disabled />
          </a-form-item>
          <a-form-item label="论文">
            <a-input v-model:value="form.paper" disabled />
          </a-form-item>
          <!-- 教育背景 -->
          <a-form-item label="教育背景">
            <a-input v-model:value="form.degree" disabled />
          </a-form-item>

          <!-- 简历附件 -->
          <a-form-item label="简历附件">
            <div style="display: flex">
              <a-input v-model:value="form.resumeFileName" disabled></a-input>
              <a-button type="link" @click="previewCv()">预览</a-button>
            </div>
          </a-form-item>
        </a-form>
        <a-form
          :model="form"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          layout="vertical"
          class="form"
        >
          <!-- 个人技能 -->
          <a-form-item label="个人技能">
            <a-textarea v-model:value="form.personSkill" disabled />
          </a-form-item>
          <!-- 在校经历 -->
          <div style="padding-bottom: 5px; font-size: 18px">
            <span>在校经历</span>
          </div>
          <a-form-item label="职位名称">
            <a-input v-model:value="form.campusPositionName" disabled />
          </a-form-item>
          <a-form-item label="在职时间">
            <span>{{ form.campusStartWorkTime }}</span>
            <span style="padding-left: 12px">至</span>
            <span style="padding-left: 12px">{{ form.campusEndWorkTime }}</span>
          </a-form-item>
          <a-form-item label="详细内容">
            <a-textarea v-model:value="form.campusExperience" disabled />
          </a-form-item>

          <div style="padding-bottom: 5px; font-size: 18px">
            <span>工作经历</span>
          </div>
          <a-form-item label="公司名称">
            <a-input v-model:value="form.componyName" disabled />
          </a-form-item>
          <a-form-item label="职位名称">
            <a-input v-model:value="form.positionName" disabled />
          </a-form-item>
          <a-form-item label="就职时间">
            <span>{{ form.startWorkTime }}</span>
            <span style="padding-left: 12px">至</span>
            <span style="padding-left: 12px">{{ form.endWorkTime }}</span>
          </a-form-item>
          <a-form-item label="工作经历">
            <a-textarea v-model:value="form.workExperience" disabled />
          </a-form-item>
          <!-- 项目经历 -->
          <div style="padding-bottom: 5px; font-size: 18px">
            <span>项目经历</span>
          </div>
          <a-form-item label="项目名称">
            <a-input v-model:value="form.projectName" disabled />
          </a-form-item>
          <a-form-item label="项目角色">
            <a-input v-model:value="form.projectRole" disabled />
          </a-form-item>
          <a-form-item label="项目时间">
            <span>{{ form.projectStartTime }}</span>
            <span style="padding-left: 12px">至</span>
            <span style="padding-left: 12px">{{ form.projectEndTime }}</span>
          </a-form-item>
          <a-form-item label="详细内容">
            <a-textarea v-model:value="form.projectExperience" disabled />
          </a-form-item>
          <!-- 自我评价 -->
          <a-form-item label="自我评价">
            <a-textarea v-model:value="form.selfDesc" disabled />
          </a-form-item>
        </a-form>
      </div>
    </a-card>
  </div>
  <a-drawer
    v-model:open="open"
    width="600px"
    :closable="false"
    title="简历信息补全"
    placement="right"
  >
    <template #extra>
      <a-icon type="icon-CloseButton" style="cursor: pointer" @click="handleClose()"></a-icon>
    </template>
    <a-form :model="editForm" layout="vertical">
      <!-- 毕业院校 -->
      <a-form-item label="用户名" :rules="[{ required: true }]">
        <a-input v-model:value="editForm.userName" placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item label="邮箱" :rules="[{ required: true }]">
        <a-input v-model:value="editForm.email" placeholder="请输入邮箱" />
      </a-form-item>
      <a-form-item label="手机号码" :rules="[{ required: true }]">
        <a-input v-model:value="editForm.telNum" placeholder="请输入手机号码" />
      </a-form-item>
      <a-form-item label="性别" :rules="[{ required: true }]">
        <a-radio-group v-model:value="editForm.sex">
          <a-radio :value="0">男</a-radio>
          <a-radio :value="1">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="年龄" :rules="[{ required: true }]">
        <a-input-number style="width: 100%" v-model:value="editForm.age" placeholder="请输入年龄" />
      </a-form-item>
      <a-form-item label="毕业院校" :rules="[{ required: true, message: '请输入毕业院校' }]">
        <a-input v-model:value="editForm.bg" placeholder="请输入毕业院校" />
      </a-form-item>
      <!-- 专业 -->
      <a-form-item label="专业" :rules="[{ required: true, message: '请输入专业' }]">
        <a-input v-model:value="editForm.major" placeholder="请输入专业" />
      </a-form-item>
      <!-- 教育背景 -->
      <a-form-item label="教育背景" :rules="[{ required: true, message: '请输入教育背景' }]">
        <a-input v-model:value="editForm.degree" placeholder="请输入教育背景" />
      </a-form-item>

      <a-form-item label="身份" :rules="[{ required: true }]">
        <a-input v-model:value="editForm.gen" placeholder="请输入身份" />
      </a-form-item>
      <a-form-item label="绩点" :rules="[{ required: true }]">
        <a-input v-model:value="editForm.gpa" placeholder="请输入绩点" />
      </a-form-item>
      <a-form-item label="个人链接" :rules="[{ required: true }]">
        <a-input v-model:value="editForm.link" placeholder="请输入个人链接" />
      </a-form-item>
      <a-form-item label="当前所在地" :rules="[{ required: true }]">
        <a-input v-model:value="editForm.location" placeholder="请输入当前所在地" />
      </a-form-item>

      <a-form-item label="描述" :rules="[{ required: true }]">
        <a-input v-model:value="editForm.description" placeholder="请输入描述" />
      </a-form-item>
      <a-form-item label="期望岗位" :rules="[{ required: true }]">
        <a-input v-model:value="editForm.jobIntention" placeholder="请输入期望岗位" />
      </a-form-item>
      <a-form-item label="工作地" :rules="[{ required: true }]">
        <a-input v-model:value="editForm.workLocation" placeholder="请输入工作地" />
      </a-form-item>
      <a-form-item label="其他" :rules="[{ required: true }]">
        <a-input v-model:value="editForm.others" placeholder="请输入其他" />
      </a-form-item>
      <a-form-item label="论文" :rules="[{ required: true }]">
        <a-input v-model:value="editForm.paper" placeholder="请输入论文" />
      </a-form-item>
      <!-- 在校经历 -->
      <div style="padding-bottom: 5px; font-size: 18px">
        <span style="padding-right: 4px; color: #ff4d4f">*</span>
        <span>在校经历</span>
      </div>
      <a-form-item label="职位名称" :rules="[{ required: true, message: '请输入职位名称' }]">
        <a-input v-model:value="editForm.campusPositionName" placeholder="请输入职位名称" />
      </a-form-item>
      <a-form-item label="在职时间" :rules="[{ required: true, message: '请输入就职时间' }]">
        <a-range-picker v-model:value="editForm.campusWorkTime" />
      </a-form-item>
      <a-form-item label="详细内容" :rules="[{ required: true, message: '请输入详细内容' }]">
        <a-textarea v-model:value="editForm.campusExperience" placeholder="请输入详细内容" />
      </a-form-item>
      <a-form-item>
        <a-button type="link"><PlusCircleOutlined />新增在校经历</a-button>
      </a-form-item>
      <div style="padding-bottom: 5px; font-size: 18px">
        <span style="padding-right: 4px; color: #ff4d4f">*</span>
        <span>工作经历</span>
      </div>
      <a-form-item label="公司名称" :rules="[{ required: true, message: '请输入公司名称' }]">
        <a-input v-model:value="editForm.componyName" placeholder="请输入公司名称" />
      </a-form-item>
      <a-form-item label="职位名称" :rules="[{ required: true, message: '请输入职位名称' }]">
        <a-input v-model:value="editForm.positionName" placeholder="请输入职位名称" />
      </a-form-item>
      <a-form-item label="就职时间" :rules="[{ required: true, message: '请输入就职时间' }]">
        <a-range-picker v-model:value="editForm.workTime" />
      </a-form-item>
      <a-form-item label="工作经历" :rules="[{ required: true, message: '请输入工作经历' }]">
        <a-textarea v-model:value="editForm.workExperience" placeholder="请输入工作经历" />
      </a-form-item>
      <a-form-item>
        <a-button type="link"> <PlusCircleOutlined />新增工作经历</a-button>
      </a-form-item>

      <!-- 项目经历 -->
      <div style="padding-bottom: 5px; font-size: 18px">
        <span style="padding-right: 4px; color: #ff4d4f">*</span>
        <span>项目经历</span>
      </div>
      <a-form-item label="项目名称" :rules="[{ required: true, message: '请输入项目经历' }]">
        <a-input v-model:value="editForm.projectName" placeholder="请输入项目经历" />
      </a-form-item>
      <a-form-item label="项目角色" :rules="[{ required: true, message: '请输入项目角色' }]">
        <a-input v-model:value="editForm.projectRole" placeholder="请输入项目角色" />
      </a-form-item>
      <a-form-item label="项目时间" :rules="[{ required: true, message: '请输入项目时间' }]">
        <a-range-picker v-model:value="editForm.projectTime" />
      </a-form-item>
      <a-form-item label="详细内容" :rules="[{ required: true, message: '请输入下详细内容' }]">
        <a-textarea v-model:value="editForm.projectExperience" placeholder="请输入详细内容" />
      </a-form-item>
      <a-form-item>
        <a-button type="link"><PlusCircleOutlined />新增项目经历</a-button>
      </a-form-item>

      <!-- 个人技能 -->
      <a-form-item label="个人技能" :rules="[{ required: true, message: '请输入个人技能' }]">
        <a-textarea v-model:value="editForm.personSkill" placeholder="请输入个人技能" />
      </a-form-item>
      <!-- 自我评价 -->
      <a-form-item label="自我评价" :rules="[{ required: true, message: '请输入自我评价' }]">
        <a-textarea v-model:value="editForm.selfDesc" placeholder="请输入自我评价" />
      </a-form-item>
      <!-- 简历附件 -->
      <a-form-item label="简历附件" :rules="[{ required: true, message: '请上传简历附件' }]">
        <a-upload
          v-model:value="fileList"
          :before-upload="beforeUpload"
          @change="handleUploadChange"
        >
          <a-button>
            <UploadOutlined />
            选择文件
          </a-button>
        </a-upload>
      </a-form-item>
      <!-- 提交按钮 -->
      <a-form-item>
        <a-button type="primary" @click="handleSubmit">提交</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/stores/userStore'
import server from '@/api'
import dayjs from 'dayjs'
import { UploadOutlined, PlusCircleOutlined } from '@ant-design/icons-vue'
const userStore = useUserStore()
const form = ref({
  userName: '',
  sex: '',
  telNum: '',
  email: '',
  bg: '',
  major: '',
  degree: '',
  gen: '',
  gpa: '',
  link: '',
  location: '',
  workLocation: '',
  description: '',
  jobIntention: '',
  others: '',
  paper: '',
  age: '',

  profileID: '',
  applicantID: '',

  campusPositionName: '',
  campusWorkTime: '',
  campusStartWorkTime: '',
  campusEndWorkTime: '',

  campusExperience: '',

  componyName: '',
  positionName: '',
  workTime: '',
  startWorkTime: '',
  endWorkTime: '',
  workExperience: '',

  projectName: '',
  projectRole: '',
  projectTime: '',
  projectStartTime: '',
  projectEndTime: '',
  projectExperience: '',

  personSkill: '',
  selfDesc: '',
  resumeFileName: '',
  path: '',
  id: '',
})
const editForm = ref({
  userName: '',
  sex: '',
  telNum: '',
  email: '',
  bg: '',
  major: '',
  degree: '',
  gen: '',
  gpa: '',
  link: '',
  location: '',
  workLocation: '',
  description: '',
  jobIntention: '',
  others: '',
  paper: '',
  age: '',

  profileID: '',
  applicantID: '',

  campusPositionName: '',
  campusWorkTime: '',
  campusStartWorkTime: '',
  campusEndWorkTime: '',

  campusExperience: '',

  componyName: '',
  positionName: '',
  workTime: '',
  startWorkTime: '',
  endWorkTime: '',
  workExperience: '',

  projectName: '',
  projectRole: '',
  projectTime: '',
  projectStartTime: '',
  projectEndTime: '',
  projectExperience: '',

  personSkill: '',
  selfDesc: '',
  resumeFileName: '',
  path: '',
  id: '',
})
const fileList = ref([])
const selectedFiles = ref([])

// 编辑状态

const open = ref(false)
const handleAddCvInfo = () => {
  editForm.value = JSON.parse(JSON.stringify(form.value))
  open.value = true
}
const handleClose = () => {
  open.value = false
}

const beforeUpload = () => false // 阻止自动上传

const handleUploadChange = async ({ fileList }) => {
  selectedFiles.value = fileList
}
const submitZipToServer = async () => {
  if (!selectedFiles.value.length) {
    message.warning('请先选择一个文件')
    return
  }

  const file = selectedFiles.value[0].originFileObj

  const formData = new FormData()
  formData.append('file', file)
  formData.append('userId', userStore.userAccount)

  try {
    const res = await server.uploadProfile(formData) // 假设有 uploadResume 接口
    if (res.data.code === 0) {
      message.success('简历上传成功')
      open.value = false
      getUserInfo()
    } else {
      message.error(res.data.message || '上传失败')
    }
  } catch (error) {
    message.error('上传发生错误')
    console.error(error)
  }
}

const handleSubmit = async () => {
  await submitZipToServer()
  let applicant = {
    userName: editForm.value.userName,
    userId: userStore.userAccount,
    sex: editForm.value.sex,
    telNum: editForm.value.telNum,
    email: editForm.value.email,
    bg: editForm.value.bg,
    major: editForm.value.major,
    degree: editForm.value.degree,
    gen: editForm.value.gen,
    gpa: editForm.value.gpa,
    link: editForm.value.link,
    location: editForm.value.location,
    id: editForm.value.applicantID,
    description: editForm.value.description,

    age: editForm.value.age,
  }
  let profile = {
    campusExperience:
      editForm.value.campusPositionName +
      '$' +
      dayjs(editForm.value.campusWorkTime[0]).format('YYYY-MM-DD HH:mm:ss') +
      '%' +
      dayjs(editForm.value.campusWorkTime[1]).format('YYYY-MM-DD HH:mm:ss') +
      '^' +
      editForm.value.campusExperience,
    workExperience:
      editForm.value.componyName +
      '$' +
      editForm.value.positionName +
      '&' +
      dayjs(editForm.value.workTime[0]).format('YYYY-MM-DD HH:mm:ss') +
      '%' +
      dayjs(editForm.value.workTime[1]).format('YYYY-MM-DD HH:mm:ss') +
      '^' +
      editForm.value.workExperience,
    projectExperience:
      editForm.value.projectName +
      '$' +
      editForm.value.projectRole +
      '&' +
      dayjs(editForm.value.projectTime[0]).format('YYYY-MM-DD HH:mm:ss') +
      '%' +
      dayjs(editForm.value.projectTime[1]).format('YYYY-MM-DD HH:mm:ss') +
      '^' +
      editForm.value.projectExperience,
    personSkill: editForm.value.personSkill,
    selfDesc: editForm.value.selfDesc,
    userName: editForm.value.userName,
    userId: userStore.userAccount,
    id: editForm.value.profileID,
    location: editForm.value.workLocation,
    jobIntention: editForm.value.jobIntention,
    others: editForm.value.others,
    paper: editForm.value.paper,
  }
  try {
    const res = await server.updateUserData({
      applicant,
      profile,
      userId: userStore.userAccount,
    })
    if (res.data) {
      message.success('编辑成功')
      getUserInfo()
    } else {
      message.warn('编辑失败')
    }
  } catch (error) {
    message.error(error)
  }
}
const previewCv = async () => {
  try {
    const res = await server.getMyProfile(userStore.userAccount)
    if (res.data.code === 0) {
      const url =
        'http://localhost:8101/api/profile/preview/' +
        res.data.data.path?.slice(res.data.data.path.lastIndexOf('\\') + 1)
      window.open(url)
    }
  } catch (error) {
    message.error(error)
  }
}

const getUserInfo = async () => {
  try {
    const res = await server.getUserInfo(userStore.userAccount)
    if (res.data.code === 0) {
      const applicant = res.data.data.applicant
      const profile = res.data.data.profile
      form.value.userName = applicant?.userName
      form.value.sex = applicant?.sex
      form.value.telNum = applicant?.telNum
      form.value.email = applicant?.email
      form.value.bg = applicant?.bg
      form.value.degree = applicant?.degree
      form.value.major = applicant?.major
      form.value.gen = applicant?.gen
      form.value.gpa = applicant?.gpa
      form.value.link = applicant?.link
      form.value.location = applicant?.location
      form.value.description = applicant?.description
      form.value.applicantID = applicant?.id
      form.value.age = applicant?.age

      form.value.personSkill = profile?.personSkill
      form.value.path = profile?.path
      form.value.selfDesc = profile?.selfDesc
      form.value.id = profile?.id
      form.value.resumeFileName = profile?.path?.slice(profile?.path.lastIndexOf('\\') + 1)
      form.value.workLocation = profile?.location
      form.value.jobIntention = profile?.jobIntention
      form.value.others = profile?.others
      form.value.paper = profile?.paper
      form.value.profileID = profile?.id
      form.value.campusPositionName = profile?.campusExperience?.slice(
        0,
        profile?.campusExperience.indexOf('$'),
      )
      form.value.campusStartWorkTime = profile?.campusExperience?.slice(
        profile?.campusExperience.indexOf('$') + 1,
        profile?.campusExperience.indexOf('%'),
      )
      form.value.campusEndWorkTime = profile?.campusExperience?.slice(
        profile?.campusExperience.indexOf('%') + 1,
        profile?.campusExperience.indexOf('^'),
      )
      form.value.campusExperience = profile?.campusExperience?.slice(
        profile?.campusExperience.indexOf('^') + 1,
      )
      form.value.componyName = profile?.workExperience?.slice(
        0,
        profile?.workExperience.indexOf('$'),
      )
      form.value.positionName = profile?.workExperience?.slice(
        profile?.workExperience.indexOf('$') + 1,
        profile?.workExperience.indexOf('&'),
      )
      form.value.startWorkTime = profile?.workExperience?.slice(
        profile?.workExperience.indexOf('&') + 1,
        profile?.workExperience.indexOf('%'),
      )
      form.value.endWorkTime = profile?.workExperience?.slice(
        profile?.workExperience.indexOf('%') + 1,
        profile?.workExperience.indexOf('^'),
      )
      form.value.workExperience = profile?.workExperience?.slice(
        profile?.workExperience.indexOf('^') + 1,
      )
      form.value.projectName = profile?.projectExperience?.slice(
        0,
        profile?.projectExperience.indexOf('$'),
      )
      form.value.projectRole = profile?.projectExperience?.slice(
        profile?.projectExperience.indexOf('$') + 1,
        profile?.projectExperience.indexOf('&'),
      )
      form.value.projectStartTime = profile?.projectExperience?.slice(
        profile?.projectExperience.indexOf('&') + 1,
        profile?.projectExperience.indexOf('%'),
      )
      form.value.projectEndTime = profile?.projectExperience?.slice(
        profile?.projectExperience.indexOf('%') + 1,
        profile?.projectExperience.indexOf('^'),
      )
      form.value.projectExperience = profile?.projectExperience?.slice(
        profile?.projectExperience.indexOf('^') + 1,
      )
    }
  } catch (error) {
    message.error(error)
  }
}
onMounted(() => {
  getUserInfo()
})
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.info-card {
  margin-bottom: 20px;
}

.resume-card {
  margin-bottom: 20px;
}

:deep(.ant-input-disabled) {
  border: none;
  background-color: #fff;
  color: #000;
}

:deep(.ant-picker-disabled) {
  border: none;
  background-color: #fff;
  color: #000;
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.form {
  padding: 16px;
  padding-left: 60px;
}
</style>
